<script setup lang="ts">
import { ref, reactive, watch, onMounted, onUnmounted, nextTick } from "vue";
import ReTable from "@/components/ReTable/index.vue";
import ReHeaderSearch from "@/components/ReHeaderSearch/index.vue";
import { useSettingStoreHook } from "@/store/modules/settings";
import ReNewDialog from "@/components/ReNewDialog/index.vue";
import {
  ElMessage,
  ElMessageBox,
  type FormInstance,
  type FormRules
} from "element-plus";
import type { Action } from "element-plus";
defineOptions({
  name: "blindBoxGoodsList"
});
interface ValueType {
  val: {
    buttonType: string;
  };
  row: object;
}
interface goodsFormType {
  blindBoxId: string;
  goodsId: string;
  level: string;
  probability: string;
  status: string;
}
const pureSetting = useSettingStoreHook();
const dialogViewVisible = ref(false);
const dialogTitle = ref("");
const ruleFormRef = ref<FormInstance>();
const deleteModal = () => {
  ElMessageBox.confirm("确定要删除选中的盲盒商品吗?", "提示", {
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消"
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch((action: Action) => {
      ElMessage({ type: "info", message: "取消删除" });
    });
};
watch(
  () => pureSetting.buttonInfo,
  (newValue, oldValue) => {
    if (Object.keys(newValue).length !== 0) {
      let value = newValue as ValueType;
      switch (value.val.buttonType) {
        case "delete":
          deleteModal();
          break;
        case "edit":
          console.log("编辑按钮", newValue);
          dialogTitle.value = "修改盲盒商品";
          dialogViewVisible.value = true;
          break;
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
const goodsForm = reactive<goodsFormType>({
  blindBoxId: "", // 盲盒ID
  goodsId: "", // 商品ID
  level: "", // 品质
  probability: "", // 几率
  status: "1" // 状态
} as goodsFormType);
const rules = reactive<FormRules>({
  blindBoxId: [{ required: true, message: "请选择盲盒", trigger: "blur" }],
  goodsId: [{ required: true, message: "请选择商品", trigger: "blur" }],
  level: [{ required: true, message: "请选择品质", trigger: "blur" }],
  probability: [{ required: true, message: "请输入几率", trigger: "blur" }],
  status: [{ required: true, message: "请选择状态", trigger: "blur" }]
});
const blindBoxOptions = reactive([
  {
    label: "开苹果14Pr0，100%有奖",
    value: "1"
  },
  {
    label: "Apple全家桶!高爆",
    value: "2"
  },
  {
    label: "低价尝鲜一生活好物",
    value: "3"
  }
]);
const goodsOptions = reactive([
  {
    label: "苹果14Pro",
    value: "1"
  },
  {
    label: "苹果14ProMax",
    value: "2"
  },
  {
    label: "苹果14",
    value: "3"
  },
  {
    label: "苹果14Plus",
    value: "4"
  }
]);
const levelOptions = reactive([
  {
    label: "普通",
    value: "1"
  },
  {
    label: "黄金",
    value: "2"
  },
  {
    label: "钻石",
    value: "3"
  },
  {
    label: "传奇",
    value: "4"
  }
]);
const handleGetCreate = () => {
  dialogTitle.value = "添加盲盒商品";
  dialogViewVisible.value = true;
};
const handleGetDeleteIds = (deleteIds: string[]) => {
  deleteModal();
};
const handleCloseDialog = () => {
  console.log("关闭弹窗");
  resetForm(ruleFormRef.value);
};
const handleConfirmDialog = () => {
  console.log("确认弹窗");
  submitForm(ruleFormRef.value);
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      resetForm(formEl);
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogViewVisible.value = false;
};
</script>
<template>
  <div class="blind-box-goods-list-container">
    <el-card shadow="hover" class="mb-2">
      <ReHeaderSearch tableType="blindBoxGoodsList" />
    </el-card>
    <ReTable
      type="blindBoxGoodsList"
      create-btn-text="添加盲盒商品"
      delete-btn-text="删除选中盲盒商品"
      class="content-body"
      @delete="handleGetDeleteIds"
      @create="handleGetCreate"
    />
    <ReNewDialog
      :visible="dialogViewVisible"
      :dialogTitle="dialogTitle"
      @close="handleCloseDialog"
      @confirm="handleConfirmDialog"
    >
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="goodsForm"
          :rules="rules"
          label-width="140px"
        >
          <el-form-item label="所属盲盒" prop="blindBoxId">
            <el-select
              v-model="goodsForm.blindBoxId"
              placeholder="请选择所属盲盒"
            >
              <el-option
                v-for="item in blindBoxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="指向商品" prop="goodsId">
            <el-select v-model="goodsForm.goodsId" placeholder="请选择指向商品">
              <el-option
                v-for="item in goodsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属品质" prop="level">
            <el-select v-model="goodsForm.level" placeholder="请选择所属品质">
              <el-option
                v-for="item in levelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="单品概率" prop="probability">
            <el-input
              v-model="goodsForm.probability"
              placeholder="请输入单品概率"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="goodsForm.status">
              <el-radio value="1" size="large">启用</el-radio>
              <el-radio value="0" size="large">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
    </ReNewDialog>
  </div>
</template>
